<template>
  <div id="home" style="position: relative">
    <HeaderPage />
    <div class="content">
      <div class="courseContent">

      </div>
    </div>

  </div>
</template>

<script>
import HeaderPage from "@/components/HeaderPage.vue";
export default {
  data() {
    return {
    };
  },
  components: {
    HeaderPage,
  },

};
</script>

<style scoped>
.content {
  background-image: url("../../assets/images/home-bg.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 900px;
  position: fixed;
  width: 100%;
  left: 0;
  top: 80px;
  overflow: auto;
}

.courseContent{
  padding: 20px;
  width: 80%;
  background-color: white;
  margin: 60px auto;
  border-radius: 10px;
}
.course:hover {
  cursor: pointer;
}
</style>
